<template>
  <div className="login">
    <div className="login-box">
      <div className="login-detail">
        <input placeholder='请输入登录名' v-model="mobile">
        <input placeholder='请输入密码' type="password" v-model="password"/>
        <div className='login-button' @click="login">登录</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {userLogin} from "@/http/user";
import router from "@/router";

export default {
  name: "index",
  data() {
    return {
      mobile: '',
      password: ''
    }
  },
  methods: {
    login() {
      let params = {mobile: this.mobile, password: this.password}
      userLogin(params).then(res => {
        if (res.code == 0) {
          localStorage.setItem('token',res.data.token)
          router.push({path: "/index"})
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.login-box {
  width: 512px;
  height: 600px;
  overflow: hidden;
  justify-content: center;
  display: flex;
  align-items: center;
}

.login-detail {
  justify-content: space-around;
  flex-direction: column;
  display: flex;
  padding: 16px;
  align-items: center;
  color: #fff;
  width: 440px;
  /*height: 320px;*/
  pointer-events: all;
}

.login-box-title {
  height: 50px;
  width: 100%;
  text-align: center;
  font-size: 36px;
  margin-top: 64px;
}

.login-title {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  color: #333;

}

.login-box input {
  padding-left: 16px;
  height: 28px;
  width: 380px;
  color: #555;
  border: 1px solid #ccc;
  height: 38px;
  outline-style: none;
  margin-top: 40px;
}


.login-button {
  border: 1px solid #165B65;
  border-radius: 4px;
  text-align: center;
  padding: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  width: 180px;
  cursor: pointer;
  background: #363940;
  margin-top: 40px;
}

</style>